<template>
  <!-- 新增事件线索 -->
  <h-modal v-model="show" title="新增事件线索" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="24">
          <a-form-model-item label="时间" >
            <span style="font-size: 16px">{{ moment(new Date()).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="事件标题" prop="title">
            <a-input style="width: 100%" :maxLength="50" size="large" v-model="form.title" placeholder="请输入事件标题"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="事件链接" prop="link">
            <a-input style="width: 100%" size="large" v-model="form.link" placeholder="请输入事件标题"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="事件来源" prop="source">
            <a-input style="width: 100%" size="large" v-model="form.source" placeholder="请输入事件来源"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="事件描述" prop="describe">
            <a-textarea
              style="width: 100%"
              :rows="5"
              :maxLength="200"
              size="large"
              v-model="form.describe"
              placeholder="请输入事件描述"></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { addClueEvent, getClueEvent } from '@/api/serve';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    showDetail: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          if (this.showDetail) {
          getClueEvent().then(res => {
            this.form = res.data;
          });
        }
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      form: {},
      rules: {
        title: [{ required: true, message: '请输入' }],
        link: [{ required: true, message: '请输入' }],
        source: [{ required: true, message: '请输入' }]
      },
      detail: {}
    };
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          addClueEvent(this.form).then(res => {
            this.show = false;
            this.$message.success('创建成功');
            this.$emit('submit');
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style>

</style>
